<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  	<el-breadcrumb-item :to="{ path: '/stock' }">首页</el-breadcrumb-item>
		  	<el-breadcrumb-item>库存图表</el-breadcrumb-item>
		</el-breadcrumb>
		<div>
		<span class="demonstration">时间:</span>
			 <el-date-picker
		      v-model="rantime"
			  value-format="yyyy-MM-dd"
		      type="daterange"
		      start-placeholder="开始日期"
		      end-placeholder="结束日期"
		      :default-time="['00:00:00', '23:59:59']">
		    </el-date-picker>
		
		 
		<el-button type="primary" icon="el-icon-search" @click="handerSearch">搜索</el-button>
	
	</div>
		<el-row>
		  
		  
		  <el-col :span="12">
			  <div class="echarts-container">
				  <!-- 款式 -->
			  	<div class="chart" ref="myEchartPillar1"></div>
			  </div>
		  </el-col>
		  <el-col :span="12">
		  			  <div class="echarts-container">
		  				  <!-- 专利 -->
		  			  	<div class="chart" ref="myEchartPillar2"></div>
		  			  </div>
		  </el-col>
		  <el-col :span="24">
		  			  
		  			  <div class="echarts-container">
		  				  <!-- 款式来源 -->
		  			  	<div class="chart" ref="myEchartPillar"></div>
		  			  </div>
		  </el-col>
		  <el-col :span="24">
			  <div class="echarts-container">
				  <!-- 专款	 -->
			  	<div class="chart" ref="myEchartPillar3"></div>
			  </div>
		  </el-col>
		  <el-col :span="24">
			  <div class="echarts-container">
				  <!-- 风格 -->
			  	<div class="chart" ref="myEchartPillar4"></div>
			  </div>
		  </el-col>
		  <el-col :span="12">
			  <div class="echarts-container">
				  <!-- 主题 -->
			  	<div class="chart" ref="myEchartPillar5"></div>
			  </div>
		  </el-col>
		  <el-col :span="12">
		  	<div class="echarts-container">
				
		  		<div class="chart" ref="myEchartPillar6"></div>
		  	</div>		  
		  </el-col>
		</el-row>
		
		  
	</div>
</template>

<script type="text/javascript">
	import E from 'wangeditor'
	import 'wangeditor/release/wangEditor.min.css'
	import echarts from 'echarts'
	export default{
		data(){
			return{
				max:20,
				form: {
			          name: '',
			          region: '',
			          date1: '',
			          date2: '',
			          delivery: false,
			          type: [],
			          resource: '',
			          desc: ''
			        },
				cateList:[],
				dialogVisible:false,
				goods:{},
				phoneEditor:null,
				rantime:[],
			}
		},
		mounted () {
	      	/*this.phoneEditor = new E('#websiteEditorElem')
	      	this.phoneEditor.onchange = function () {
	        	this.goods.detailText = this.$txt.html()
	      	}
	      	this.phoneEditor.create()
	      	*/
		   // this.getPillar();
	    },
		created(){
			//this.goods._token = window.axios.defaults.headers.common['X-CSRF-TOKEN'];
			//this.getCates();
			this.getTime();
			this.getGood();
		},
		methods:{
		
			 onSubmit() {
			        console.log('submit!');
			      },
		
			getGood(){
				//console.log(this.$route.query.dd);
				axios.get('/api/stock/stockdata?time=' +this.rantime)
					.then(res => {
						if(res.data.code ==200){
							var data = res.data.result; 
							this.goods = data;
							if(this.goods.length != -1){
								this.getPillar()
							}else{
								
							}
						}else{
							this.$notify.error({
							  title: '错误',
							  message: res.data.message,
							});
						}
					})
					.catch(error => {
						this.$notify.error({
						  title: '错误',
						  message: error.data.message,
						});
					})
				
			},
			getTime(){
				var date = new Date()
			    let y = date.getFullYear()
			    let m = date.getMonth() + 1
			    let d = date.getDate()
			    // console.log(d)
			    let time = y + '-' + m + '-' + d;
				let d1 = '01';
				let time1 = y + '-' + m + '-' + d1;
				this.rantime[0]=time1;
			    this.rantime[1]=time;
				
			},
			 handerSearch(){
		   	 	this.getGood();
		    },
			huanhang(obj){  //偶数  折行展示
				
				let arr =  obj.name;
				if(arr.length != -1){
					
					arr = arr.map((item,index) => {
						if((index+1) % 2 == 0){
							return item = '\n' + item;
						}else{
							return item;
						}
					});
					obj.name = arr;
					return  obj;
				}
			},
			
			// 柱状图
			getPillar() {
				let data1 = {
					title:"啦啦啦",
					name: ['iso', '\n了解', 'china', '\nufo', 'seo', 'seo', 'seo', 'seo', 'seo', 'seo'],
					data: [400, 200, 300, 100, 11,60,100,300,400,200]
				};
				let {designer,fashion,patent,special,style,subject,FSalePrice} = this.goods;
				
				designer = this.huanhang(designer);
				fashion= this.huanhang(fashion);
				// patent= this.huanhang(patent);
				special= this.huanhang(special);
				style = this.huanhang(style);
				subject= this.huanhang(subject);
				FSalePrice= this.huanhang(FSalePrice);
				let color = ['#1aa1ff','rgba(26, 161, 255, 0.53)', '#ff6535',];
				let that = this;
				// 基于准备好的dom(myEchartPillar)，初始化echarts实例
				let myChart = echarts.init(this.$refs.myEchartPillar);
				let option = {
					color: color,
					backgroundColor: 'transparent',
					title: {
						text: designer.title,
						left: '60px',
						top: '6%'
					},
// 					legend: {
// 						data: ['总订单', '区域价订单', '非区域价订单'],
// 						textStyle: {
// 							color: '#fff',
// 							fontSize: '10'
// 						}
// 					},
					grid: {
					    left: '66px',
					    right: '66px',
						top: '66px',
					    bottom: '50px',
					    containLabel: false
					},
					tooltip: {
						show: true,
					},
					xAxis: [
						{
							type: 'category',
							name: '',
							axisLabel: {
								color: '#333',
								fontSize: '14',
							    show: true,
							    interval:0,
							    // inside: false,
							   	// rotate:45,
							},
							splitLine: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: '#1d5eae'
								}
							},
							data: designer.name,
// 							formatter: function (value, index) {
// 							    let a = value;
// 								console.log(a,index);
//                                 if (index % 2 === 0) {
// 									console.log(11111111);
//                                     let b = '\n'+a;
//                                     return b;
//                                 }
// 								return b
//                             }
						}
					],
					yAxis: [
						{
							type: 'value',
							axisLabel: {
								color: '#333',
								fontSize: '14'
								// formatter: '{value}'
							},
							splitLine: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: '#1d5eae'
								}
							}
						}
					],
					series: [
						{
							//系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列
							name: designer.title,
							//类型为柱状/条形图
							type: 'bar',
							//柱条的宽度，不设时自适应。支持设置成相对于类目宽度的百分比。
							barWidth: '26px',
							animation: true,
							animationEasing: 'linear',
							animation: true,
							animationEasing: 'linear',
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: color[0]
										},
										{
											offset: 1,
											color: color[1]
										}
									]),
									 //    barBorderRadius: [ 12,12,0,0],
								}
							},
							//图形上的文本标签，可用于说明图形的一些数据信息
							label: {
								normal: {
									//是否显示标签
									show: true,
									//通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置
									position: 'top'
								}
							},
							//系列中的数据内容数组
							data: designer.data
						}
					]
				};
				//指定图表的配置项和数据，绘制图表
				myChart.setOption(option);
				
				let myChart1 = echarts.init(this.$refs.myEchartPillar1);
				let option1 = {
					color:color,
					backgroundColor: 'transparent',
					title: {
						text: fashion.title,
						left: '60px',
						top: '6%'
					},
					tooltip: {
						show: true,
					},
					grid: {
					    left: '66px',
					    right: '66px',
						top: '66px',
					    bottom: '50px',
					    containLabel: false
					},
					xAxis: [
						{
							type: 'category',
							name: '',
							axisLabel: {
								color: '#333',
								fontSize: '14',
							    show: true,
							    interval:0,
							    // inside: false,
							   	// rotate:45,
							},
							splitLine: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: '#1d5eae'
								}
							},
							
							data: fashion.name,
						}
					],
					yAxis: [
						{
							type: 'value',
							axisLabel: {
								color: '#333',
								fontSize: '14',
								// formatter: '{value}'
							},
							splitLine: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: '#1d5eae'
								}
							}
						}
					],
					series: [
						{
							//系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列
							name: fashion.title,
							//类型为柱状/条形图
							type: 'bar',
							//柱条的宽度，不设时自适应。支持设置成相对于类目宽度的百分比。
							barWidth: '26px',
							animation: true,
							animationEasing: 'linear',
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: color[0]
										},
										{
											offset: 1,
											color: color[1]
										}
									]),
									 //    barBorderRadius: [ 12,12,0,0],
								}
							},
							//图形上的文本标签，可用于说明图形的一些数据信息
							label: {
								normal: {
									//是否显示标签
									show: true,
									//通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置
									position: 'top'
								}
							},
							//系列中的数据内容数组
							data: fashion.data
						}
					]
				};
				
				myChart1.setOption(option1);
				
				let myChart2 = echarts.init(this.$refs.myEchartPillar2);
				let option2 = {
					color:color,
					backgroundColor: 'transparent',
					title: {
						text: patent.title,
						left: '60px',
						top: '6%'
					},
					tooltip: {
						show: true,
					},
					grid: {
					    left: '66px',
					    right: '66px',
						top: '66px',
					    bottom: '50px',
					    containLabel: false
					},
					xAxis: [
						{
							type: 'category',
							name: '',
							axisLabel: {
								color: '#333',
								fontSize: '14',
							    show: true,
							    interval:0,
							    // inside: false,
							   	// rotate:45,
							},
							splitLine: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: '#1d5eae'
								}
							},
							data: patent.name,
						}
					],
					yAxis: [
						{
							type: 'value',
							axisLabel: {
								color: '#333',
								fontSize: '14'
								// formatter: '{value}'
							},
							splitLine: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: '#1d5eae'
								}
							}
						}
					],
					series: [
						{
							//系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列
							name: patent.title,
							//类型为柱状/条形图
							type: 'bar',
							//柱条的宽度，不设时自适应。支持设置成相对于类目宽度的百分比。
							barWidth: '26px',
							animation: true,
							animationEasing: 'linear',
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: color[0]
										},
										{
											offset: 1,
											color: color[1]
										}
									]),
									 //    barBorderRadius: [ 12,12,0,0],
								}
							},
							//图形上的文本标签，可用于说明图形的一些数据信息
							label: {
								normal: {
									//是否显示标签
									show: true,
									//通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置
									position: 'top'
								}
							},
							//系列中的数据内容数组
							data: patent.data
						}
					]
				};
					
				myChart2.setOption(option2);
							
				let myChart3 = echarts.init(this.$refs.myEchartPillar3);
				let option3 = {
					color:color,
					backgroundColor: 'transparent',
					title: {
						text: special.title,
						left: '60px',
						top: '6%'
					},
					tooltip: {
						show: true,
					},
					grid: {
					    left: '66px',
					    right: '66px',
						top: '66px',
					    bottom: '50px',
					    containLabel: false
					},
					xAxis: [
						{
							type: 'category',
							name: '',
							axisLabel: {
								color: '#333',
								fontSize: '14',
							    show: true,
							    interval:0,
							    // inside: false,
							   	// rotate:45,
							},
							splitLine: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: '#1d5eae'
								}
							},
							data: special.name,
						}
					],
					yAxis: [
						{
							type: 'value',
							axisLabel: {
								color: '#333',
								fontSize: '14'
								// formatter: '{value}'
							},
							splitLine: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: '#1d5eae'
								}
							}
						}
					],
					series: [
						{
							//系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列
							name: special.title,
							//类型为柱状/条形图
							type: 'bar',
							//柱条的宽度，不设时自适应。支持设置成相对于类目宽度的百分比。
							barWidth: '26px',
							animation: true,
							animationEasing: 'linear',
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: color[0]
										},
										{
											offset: 1,
											color: color[1]
										}
									]),
									 //    barBorderRadius: [ 12,12,0,0],
								}
							},
							//图形上的文本标签，可用于说明图形的一些数据信息
							label: {
								normal: {
									//是否显示标签
									show: true,
									//通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置
									position: 'top'
								}
							},
							//系列中的数据内容数组
							data: special.data
						}
					]
				};
					
				myChart3.setOption(option3);
				
				let myChart4 = echarts.init(this.$refs.myEchartPillar4);
				let option4 = {
					color:color,
					backgroundColor: 'transparent',
					title: {
						text: style.title,
						left: '60px',
						top: '6%'
					},
					tooltip: {
						show: true,
					},
					grid: {
					    left: '66px',
					    right: '66px',
						top: '66px',
					    bottom: '70px',
					    containLabel: false
					},
					xAxis: [
						{
							type: 'category',
							name: '',
							axisLabel: {
								color: '#333',
								fontSize: '14',
							    show: true,
							    interval:0,
							    // inside: false,
							   	// rotate:45,
							},
							splitLine: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: '#1d5eae'
								}
							},
							data: style.name,
						}
					],
					yAxis: [
						{
							type: 'value',
							axisLabel: {
								color: '#333',
								fontSize: '14'
								// formatter: '{value}'
							},
							splitLine: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: '#1d5eae'
								}
							}
						}
					],
					"dataZoom": [{
				          "show": true,
				          "height": 18,
				          "xAxisIndex": [
				            0
				          ],
				          bottom:'10',
				          "start": 0,
				          "end": 70,
				          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
				          handleSize: '110%',
				          handleStyle:{
				            color:"rgba(26, 161, 255, 0.53)",
				
				          },
				          textStyle:{
				            color:"#333"},
				          borderColor:"rgba(26, 161, 255, 0.53)"
				        }, {
				          "type": "inside",
				          "show": true,
				          "height": 5,
				          "start": 1,
				          "end": 6
				        }],
					series: [
						{
							//系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列
							name: style.title,
							//类型为柱状/条形图
							type: 'bar',
							//柱条的宽度，不设时自适应。支持设置成相对于类目宽度的百分比。
							barWidth: '26px',
							animation: true,
							animationEasing: 'linear',
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: color[0]
										},
										{
											offset: 1,
											color: color[1]
										}
									]),
									 //    barBorderRadius: [ 12,12,0,0],
								}
							},
							//图形上的文本标签，可用于说明图形的一些数据信息
							label: {
								normal: {
									//是否显示标签
									show: true,
									//通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置
									position: 'top'
								}
							},
							//系列中的数据内容数组
							data: style.data
						}
					]
				};
				
				myChart4.setOption(option4);
				
				let myChart5 = echarts.init(this.$refs.myEchartPillar5);
				let option5 = {
					color:color,
					backgroundColor: 'transparent',
					title: {
						text: subject.title,
						left: '60px',
						top: '6%'
					},
					tooltip: {
						show: true,
					},
					grid: {
					    left: '66px',
					    right: '66px',
						top: '66px',
					    bottom: '50px',
					    containLabel: false
					},
					xAxis: [
						{
							type: 'category',
							name: '',
							axisLabel: {
								color: '#333',
								fontSize: '14',
							    show: true,
							    interval:0,
							    // inside: false,
							   	// rotate:45,
							},
							splitLine: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: '#1d5eae'
								}
							},
							data: subject.name,
						}
					],
					yAxis: [
						{
							type: 'value',
							axisLabel: {
								color: '#333',
								fontSize: '14'
								// formatter: '{value}'
							},
							splitLine: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: '#1d5eae'
								}
							}
						}
					],
					series: [
						{
							//系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列
							name: subject.title,
							//类型为柱状/条形图
							type: 'bar',
							//柱条的宽度，不设时自适应。支持设置成相对于类目宽度的百分比。
							barWidth: '26px',
							animation: true,
							animationEasing: 'linear',
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: color[0]
										},
										{
											offset: 1,
											color: color[1]
										}
									]),
									 //    barBorderRadius: [ 12,12,0,0],
								}
							},
							//图形上的文本标签，可用于说明图形的一些数据信息
							label: {
								normal: {
									//是否显示标签
									show: true,
									//通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置
									position: 'top'
								}
							},
							//系列中的数据内容数组
							data: subject.data
						}
					]
				};
				
				myChart5.setOption(option5);
				
				let myChart6 = echarts.init(this.$refs.myEchartPillar6);
				let option6 = {
					color:color,
					backgroundColor: 'transparent',
					title: {
						text: FSalePrice.title,
						left: '60px',
						top: '6%'
					},
					tooltip: {
						show: true,
					},
					grid: {
					    left: '66px',
					    right: '66px',
						top: '66px',
					    bottom: '50px',
					    containLabel: false
					},
					xAxis: [
						{
							type: 'category',
							name: '',
							axisLabel: {
								color: '#333',
								fontSize: '14',
							    show: true,
							    interval:0,
							    // inside: false,
							   	// rotate:45,
							},
							splitLine: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: '#1d5eae'
								}
							},
							data: FSalePrice.name,
						}
					],
					yAxis: [
						{
							type: 'value',
							axisLabel: {
								color: '#333',
								fontSize: '14'
								// formatter: '{value}'
							},
							splitLine: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: '#1d5eae'
								}
							}
						}
					],
					series: [
						{
							//系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列
							name: FSalePrice.title,
							//类型为柱状/条形图
							type: 'bar',
							//柱条的宽度，不设时自适应。支持设置成相对于类目宽度的百分比。
							barWidth: '26px',
							animation: true,
							animationEasing: 'linear',
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: color[0]
										},
										{
											offset: 1,
											color: color[1]
										}
									]),
									 //    barBorderRadius: [ 12,12,0,0],
								}
							},
							//图形上的文本标签，可用于说明图形的一些数据信息
							label: {
								normal: {
									//是否显示标签
									show: true,
									//通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置
									position: 'top'
								}
							},
							//系列中的数据内容数组
							data: FSalePrice.data
						}
					]
				};
								
				myChart6.setOption(option6);
				//解决自适应
				setTimeout(function() {
					window.addEventListener('resize', () => {
						myChart.resize();myChart1.resize();myChart2.resize();myChart3.resize();myChart4.resize();myChart5.resize();
						myChart6.resize();
					});
				}, 500);
			}
			
		}
	}
</script>

<style type="text/css" lang="scss" scoped>
	input[type=file] {
	    display: none;
	}
	.echarts-container {
		width: 100%;
		.chart {
			width: 100%;
			height: 300px;
		}
	}
</style>